<template>
    <div id="mylightspot">
        <div class="mylightspot-top">
            <div class="mylightspot-mylightspot">
                <img src="https://static.zhihu.com/heifetz/assets/title_premium_cases.6e2ee9b7.png" alt="">
            </div>
        </div>


        <div class="mylightspot-b">
            <ul>
                <li>
                   <a href="https://www.zhihu.com/org/ding-xiang-yi-sheng">
                    <img src="https://pic1.zhimg.com/v2-fc8c90ae998dd9ae303687a19043624c_hd.jpg" alt="">
                    <h2>丁香医生</h2>
                    <p>通过持续输出优质内容，获得医学话题「优秀答主」勋章，关注人数跃居全平台（不含知乎官方帐号）第一名。</p>
                    <h4>赞同 390w+关注 249w+</h4>
                    <img class="img" src="https://static.zhihu.com/heifetz/assets/title_case_create.421a31dd.png" alt="">
                   </a>
                </li>
                <li>
                    <a href="https://www.zhihu.com/org/tian-mao-54-95">
                     <img src="https://pic4.zhimg.com/v2-93b932c03cfbbf401a7bf588e25b39ec_hd.jpg" alt="">
                    <h2>天猫</h2>
                    <p>2019 年双十一举办「新国潮，潮你而来」专题，发布 22 个国潮相关问题，特邀多位高影响力用户撰写优质回答。</p>
                    <h4>专题浏览 6300w+回答 1w+</h4>
                    <img class="img" src="https://static.zhihu.com/heifetz/assets/title_case_topic.7ef01a5a.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="https://www.zhihu.com/org/de-guo-bo-lang">
                     <img src="https://static.zhihu.com/heifetz/assets/title_case_activity.a78fac9a.png" alt="">
                    <h2>德国博朗</h2>
                    <p>和知乎「不知道诊所」合作线下活动，解锁剃须冷知识，在别开生面的科普中实现品牌传播。</p>
                    <h4>活动到场 10w 人线上曝光 500w</h4>
                    <img class="img" src="https://pic2.zhimg.com/v2-6f6db41a16ef11592292ca322a6c6d7f_hd.jpg" alt="">
                    </a>
                </li>


                <li> 
                    <a href="https://www.zhihu.com/org/zuo-wen-zhi-tiao-6">
                    <img src="https://pic2.zhimg.com/v2-6c25309bbb1f944375c48b23a369f458_hd.jpg" alt="">
                    <h2>作文纸条</h2>
                    <p>购买了机构号商业版的作文纸条，在多个高赞回答里补上了「App下载插件」，转化用户下载应用。</p>
                    <h4>上线时间 45 天插件点击 4000+ 次</h4>
                    <img class="img" src="https://static.zhihu.com/heifetz/assets/title_case_download.a498ba49.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="https://www.zhihu.com/org/hu-jiang-47-50">

                     <img src="https://pic4.zhimg.com/3ee8250e166f661a7addfbe4888dd924_hd.jpg" alt="">
                    <h2>沪江</h2>
                    <p>回答问题「关于小语种大家提议学习哪一门语言呢？为什么？」，并放入试用课程推荐插件，短期内获得数万阅读量。</p>
                    <h4>插件点击率 4%报名比例 20%</h4>
                    <img class="img" src="https://static.zhihu.com/heifetz/assets/title_case_sell.2194ee9a.png" alt="">
                    </a>
                    
                    </li>
                <li> 
                    <a href="https://www.zhihu.com/org/ren-shi-xing-qiu">
                    <img src="https://pic3.zhimg.com/v2-a79246c9fd35ee22d38553b05f6d28f4_hd.jpg" alt="">
                    <h2>人事星球</h2>
                    <p>人事星球：发布文章「如何成为一名优秀的 HR？」，通过插件送福利，留下联系方式的用户，后期转化成为私域流量粉丝，加入社群。</p>
                    <h4>微信粉丝转化率 50%插件转化率 8%</h4>
                    <img class="img" src="https://static.zhihu.com/heifetz/assets/title_case_user.9e501bd0.png" alt="">
                    </a>
                    
                    </li>
            </ul>

        </div>
    </div>
</template>

<script>
export default {
    name: 'mylightspot',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#mylightspot{
    background-color: #eee;
    width: 100%;
    .mylightspot-top{
        width: 1000px;
        height: 64px;
        text-align: center;
        margin: 40px auto;
        img{
            width:178px ;
            height: 64px;
        }
    }
    .mylightspot-b{
        width: 1000px;
        height:810px ;
        margin: 0 auto;
        ul{
            list-style: none;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            a{
                text-decoration: none;
                color: #333;
            }
            li{
                width: 322px;
                margin-bottom: 10px;
                height: 373px;
                text-align: center;
                float: left;
                cursor: pointer;
                position: relative;
                background-color: ghostwhite;
                img{
                    width:56px ;
                    height: 56px;
                    border-radius: 50%;
                    text-align: center;
                    margin-top: 80px;
                }
                p{
                    width: 260px;
                    margin-left: 31px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }
                .img{
                    width:66px ;
                    height: 23px;
                    margin-top: 0px;
                    border-radius: 0%;
                    position: absolute;
                    top: 6px;
                    left: 6px;
                }
            }
        }
    }
    
}

</style>

